<template>
  <div class="zx-upload-img">
    <div class="img-container" v-for="(item, index) in imgList" :key="index">
      <img class="img-list-item" :src="item" @click="handlePreviewImg(index)" alt="">
      <img class="del-icon" @click="delImg(index)" src="../../static/img/help.svg" alt="">
    </div>
    <van-uploader v-show="imgList.length < maxCount"
                  :after-read="onRead"
                  :accept="accept"
                  class="upload-img"
                  :max-size="maxSize"
                  @oversize="handleOversize"
                  :multiple="multiple">
      <van-icon name="photograph"/>
    </van-uploader>
  </div>
</template>
<script>
  import { ImagePreview } from 'vant';
  // todo 暂时没有给外部预留相应状态变化的钩子函数，看需求

  export default {
    name: 'zx-upload-img',
    components: {},
    props: {
      value: {
        type: Array
      },
      accept: {
        type: String,
        default: 'image/*'
      },
      maxSize: {
        type: Number,
        default: 1024 * 500
      },
      multiple: {
        type: Boolean,
        default: false
      },
      maxCount: {
        type: Number,
        default: 1
      },
      action: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        imgList: []
      };
    },
    watch: {},
    computed: {},
    mounted() {
        this.imgList = this.value;
    },
    methods: {
      onRead(file) {
        // todo 读取图片文件，上传成功后更新imgList，更新value
//        this.imgList.push(result);
//        this.$set(this.imgList, this.imgList, time)
        // 判断是否超出最大上传张数
        if(file.length + this.imgList.length > this.maxCount) {
          this.$toast({message: `图片最多上传${this.maxCount}张`, position: 'middle'});
          return;
        }
//        保存数据
        this.$emit('input', this.imgList);
      },
      handleOversize(file) {
        // 尺寸大小单位是b
        const data = Math.ceil(this.maxSize/1024);
        this.$toast({message: `图片最大为${data}kb`, position: 'middle'});
        return;
      },
      delImg(index) {
          // todo 删除对应index的图片，更新value
        this.imgList.splice(index, 1)
      },
      handlePreviewImg(index) {
        const data = this.imgList[index]
        ImagePreview({
          images: [data],
          startPosition: 0,
          onClose() {
            // do something
          }
        });
      }
    }
  }
</script>
<style scoped lang="less" type="text/less">
  @import url('../../static/style/var');

  .zx-upload-img {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #ffffff;
    position: relative;
    display: flex;
    .img-container {
      position: relative;
      box-sizing: border-box;
      width: 33.3%;
      height: 100px;
      padding-right: 5px;
      .img-list-item {
        width: 100%;
        height: 100%;
      }
      .del-icon {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 10px;
        height: 10px;
      }
    }
    .upload-img {
      box-sizing: border-box;
      vertical-align: middle;
      width: 33.3%;
      height: 100px;
      padding-left: 5px;
      padding-bottom: 10px;
      background-color: #f9f9f9;
      text-align: center;
      border: 1px solid @border-color-default;
      border-radius: 4px;
      line-height: 100px;
    }
  }
</style>
